<template>
  <view class="content">
    <view class="tips-box">
      <uni-swiper-dot :info="itemArr0" :current="current" field="content" :mode="mode">
        <swiper class="swiper-box" :autoplay="true" @change="change">
         <swiper-item v-for="(item ,index) in itemArr0" :key="index">
            <view class="swiper-item" @click="itemTarget(item)">
              <img class="swiper-img" :src="item.imageLinks" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <view class="info-box">
      <view class="top-box">
        <template v-for="(item, index) in itemArr1">
          <view :key="index" @click="itemTarget(item)" class="top-item">
            <img class="top-img" :src="item.imageLinks" />
            <view class="top-text">{{item.name}}</view>
          </view>
        </template>
      </view>
      <view class="hot-div">
        <view class="hot-box one-style">
          <my-section title="热销推荐" type="line" subTitle="更多" @click="clickMore(2)"></my-section>
          <view class="hot-item-box">
            <template v-for="(item, index) in itemArr2">
              <view :key="index" @click="itemTarget(item)" class="hot-item">
                <view class="img-box">
                  <img class="hot-img" :src="item.imageLinks" />
                </view>
                <view class="item-info-box">
                  <view class="top-text">{{item.name}}</view>
                  <view class="price-box">
                    <view class="top-price">￥{{item.prodeuctPrice}}</view>
                    <img class="price-icon" src="@/static/images/shopping/cart.png">
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </view>
      <view class="hot-div">
        <view class="hot-box two-style">
          <my-section title="朱老师亲荐" type="line" subTitle="更多" @click="clickMore(3)"></my-section>
          <view class="hot-item-box">
            <template v-for="(item, index) in itemArr3">
              <view :key="index" @click="itemTarget(item)" class="hot-item">
                <view class="img-box">
                  <img class="hot-img" :src="item.imageLinks" />
                </view>
                <view class="item-info-box">
                  <view class="top-text">{{item.name}}</view>
                  <view class="price-box">
                    <view class="top-price">￥{{item.prodeuctPrice}}</view>
                    <img class="price-icon" src="@/static/images/shopping/cart.png">
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </view>
      <view class="hot-div">
        <view class="hot-box one-style">
          <my-section title="招财旺运饰品" type="line" subTitle="更多" @click="clickMore(4)"></my-section>
          <view class="hot-item-box">
            <template v-for="(item, index) in itemArr4">
              <view :key="index" @click="itemTarget(item)" class="hot-item">
                <view class="img-box">
                  <img class="hot-img" :src="item.imageLinks" />
                </view>
                <view class="item-info-box">
                  <view class="top-text">{{item.name}}</view>
                  <view class="price-box">
                    <view class="top-price">￥{{item.prodeuctPrice}}</view>
                    <img class="price-icon" src="@/static/images/shopping/cart.png">
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </view>
      <view class="hot-div">
        <view class="hot-box two-style">
          <my-section title="家居风水" type="line" subTitle="更多" @click="clickMore(5)"></my-section>
          <view class="hot-item-box">
            <template v-for="(item, index) in itemArr5">
              <view :key="index" @click="itemTarget(item)" class="hot-item">
                <view class="img-box">
                  <img class="hot-img" :src="item.imageLinks" />
                </view>
                <view class="item-info-box">
                  <view class="top-text">{{item.name}}</view>
                  <view class="price-box">
                    <view class="top-price">￥{{item.prodeuctPrice}}</view>
                    <img class="price-icon" src="@/static/images/shopping/cart.png">
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </view>
      <view class="hot-div">
        <view class="hot-box one-style">
          <my-section title="必看书籍" type="line" subTitle="更多" @click="clickMore(6)"></my-section>
          <view class="hot-item-box">
            <template v-for="(item, index) in itemArr6">
              <view :key="index" @click="itemTarget(item)" class="hot-item">
                <view class="img-box">
                  <img class="hot-img" :src="item.imageLinks" />
                </view>
                <view class="item-info-box">
                  <view class="top-text">{{item.name}}</view>
                  <view class="price-box">
                    <view class="top-price">￥{{item.prodeuctPrice}}</view>
                    <img class="price-icon" src="@/static/images/shopping/cart.png">
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </view>
      <view class="hot-div">
        <view class="hot-box two-style">
          <my-section title="太岁守护符" type="line" subTitle="更多" @click="clickMore(7)"></my-section>
          <view class="hot-item-box">
            <template v-for="(item, index) in itemArr7">
              <view :key="index" @click="itemTarget(item)" class="hot-item">
                <view class="img-box">
                  <img class="hot-img" :src="item.imageLinks" />
                </view>
                <view class="item-info-box">
                  <view class="top-text">{{item.name}}</view>
                  <view class="price-box">
                    <view class="top-price">￥{{item.prodeuctPrice}}</view>
                    <img class="price-icon" src="@/static/images/shopping/cart.png">
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </view>
      <view class="hot-div">
        <view class="hot-box one-style">
          <my-section title="生肖纳吉翡翠" type="line" subTitle="更多" @click="clickMore(8)"></my-section>
          <view class="hot-item-box">
            <template v-for="(item, index) in itemArr8">
              <view :key="index" @click="itemTarget(item)" class="hot-item">
                <view class="img-box">
                  <img class="hot-img" :src="item.imageLinks" />
                </view>
                <view class="item-info-box">
                  <view class="top-text">{{item.name}}</view>
                  <view class="price-box">
                    <view class="top-price">￥{{item.prodeuctPrice}}</view>
                    <img class="price-icon" src="@/static/images/shopping/cart.png">
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import mySection from "@/components/my-section/my-section.vue";
  import { getMallListApi } from '@/http/api'
  export default {
    components: {
      mySection
    },
    data() {
      return {
        current: 0,
        mode: 'round',
        // 轮播商品
        itemArr0: [],
        // 头部分类
        itemArr1: [],
        // 热销商品
        itemArr2: [],
        // 朱老师推荐
        itemArr3: [],
        // 招财旺运饰品
        itemArr4: [],
        // 家居风水
        itemArr5: [],
        // 必看书籍
        itemArr6: [],
        // 太岁守护符
        itemArr7: [],
        // 生肖纳吉翡翠
        itemArr8: [],
        map: [
          {
            name: '热销推荐',
            type: 2,
            url: 'https://k.weidian.com/DkDtpR7J'
          },
          {
            name: '朱老师亲荐',
            type: 3,
            url: 'https://k.weidian.com/DkDtpR7J'
          },
          {
            name: '招财旺运饰品',
            type: 4,
            url: 'https://k.weidian.com/DkDtpR7J'
          },
          {
            name: '家居风水',
            type: 5,
            url: 'https://k.weidian.com/DkDtpR7J'
          },
          {
            name: '必看书籍',
            type: 6,
            url: 'https://k.weidian.com/DkDtpR7J'
          },
          {
            name: '太岁守护神',
            type: 7,
            url: 'https://k.weidian.com/DkDtpR7J'
          },
          {
            name: '生肖纳吉翡翠',
            type: 8,
            url: 'https://k.weidian.com/DkDtpR7J'
          },
        ]
      }
    },
    methods: {
      change(e) {
        this.current = e.detail.current;
      },
      itemTarget(obj) {
        if (obj.skipLinks) {
          window.open(obj.skipLinks)
        }
      },
      clickMore(type) {
        let item = this.map.find(ele => ele.type == type);
        if (item) {
          window.open(item.url)
        }
      }
    },
    created() {
      let arr = ['轮播商品', '头部分类', '热销商品', '朱老师推荐', '招财旺运饰品', '家居风水', '必看书籍', '太岁守护符', '生肖纳吉翡翠']
      getMallListApi({
        pageNum:1,
        pageSize:999,
        status:1
      }).then(res => {
        for (let item of res.rows) {
          if (item.hot == 1) {
            this.itemArr2.push(item);
          }
          if (item.recommend == 1) {
            this.itemArr3.push(item);
          }
          let index = item.category;
          if (this['itemArr'+index]) this['itemArr'+index].push(item);
        }
      })
    }
  }
</script>

<style>
  .content {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    position: relative
  }

  .tips-box {
    box-sizing: border-box;
    height: 430rpx;
    background-image: linear-gradient(#c5a680, #9f8465);
    width: 100%;
    padding: 48rpx;
  }
  .swiper-img {
    width: 100%;
    border-radius: 20rpx;
  }

  .info-box {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: -50rpx;
    background-color: #f9f8f4;
    border-radius: 0rpx;
    box-sizing: border-box;
  }

  .top-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    height: 260rpx;
    padding: 44rpx 62rpx 16rpx;
  }

  .top-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 10rpx;
  }

  .top-img {
    box-sizing: border-box;
    height: 80rpx;
    width: 80rpx;
    padding: 14rpx;
  }

  .top-text {
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: fit-content;
    font-size: 20rpx;
  }
  .price-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 7rpx;
    font-size: 20rpx;
  }
  .top-price {
    color: #ab110f;
    font-weight: bold;
  }
  .price-icon {
    height: 36rpx;
  }
  .hot-div {
    box-sizing: border-box;
    width: 100%;
    padding: 0 32rpx;
    margin-bottom: 32rpx;
  }
  .hot-box {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    border-radius: 30rpx;
    overflow: hidden;
    padding: 10rpx;
  }
  .one-style {
    background-image: linear-gradient(to right, #fbf3e8, #ffd7a1);
  }
  .two-style {
    background-color: #eeeeee;
  }
  .hot-item-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .hot-item {
    /* height: 240rpx; */
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24rpx;
    box-sizing: border-box;
    padding: 13rpx;
  }
  .img-box {
    height: 200rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    overflow-x: hidden;
  }
  .hot-img {
    height: 100%;
    background-color: #e5e5e5;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
  }
  .item-info-box {
    width: 100%;
    background-color: #fff;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
  }
</style>
